<template>
  <div class="addGoods">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/backstage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="margin: 20px 0;">
      <el-alert title="添加商品信息" type="info" center show-icon></el-alert>
    </el-row>
    <el-steps :active="activeIndex" align-center>
      <el-step v-for="(item, index) in goodsParams" :key="index" :title="item.label"></el-step>
    </el-steps>
    <el-tabs
      :tab-position="tabPosition"
      v-model="activeName"
      @tab-click="handleClick"
      style="min-height: 200px;"
    >
      <el-tab-pane
        v-for="(item, index) in goodsParams"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
        <div class="padd">
          <div class="fontsize">商品名称</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="padd">
          <div class="fontsize">商品价格</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="padd">
          <div class="fontsize">商品重量</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="padd">
          <div class="fontsize">商品数量</div>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      input: "",
      tabPosition: "left",
      goodsParams: [
        {
          label: "基本信息",
          name: "first"
        },
        {
          label: "商品参数",
          name: "second"
        },
        {
          label: "商品属性",
          name: "third"
        },
        {
          label: "商品图片",
          name: "fourth"
        },
        {
          label: "商品内容",
          name: "five"
        }
      ],
      activeName: "first",
      activeIndex: 1
    };
  },
  methods: {
    handleClick(tab) {
      this.activeIndex = +tab.index + 1;
    }
  }
};
</script>

<style scoped lang="scss">
.addGoods {
  background: #fff;
  border-radius: 5px;
  padding: 15px;
}
.padd {
  padding-bottom: 20px;
}
.fontsize {
  width: 68px;
  height: 40px;
  padding: 0 0 10px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
}
</style>
